<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<view style="position: fixed; width: 100%; z-index: 9999;">
			<view class="header" @click="clickNav">
				<view id="back">
					<u-icon name="arrow-left" @click="clickBack" size="60rpx" v-if="back"></u-icon>
				</view>
				<view id="nav-title" v-if="scrollTop >= 20">
					<text>消息中心</text>
				</view>
				<u-line v-if="scrollTop >= 20" id="line"></u-line>
			</view>
		</view>
		<view>
			<view id="title">
				<text>消息中心</text>
			</view>
		</view>
		<view v-if="messages.length == 0" style="margin-top: 40%;">
			<u-empty iconSize="320" textSize="36" iconColor="#3d5cff" textColor="#1f1f39" mode="message"></u-empty>
		</view>
		<view class="scroll-list" v-if="messages.length > 0">
			<scroll-view id="scroll-view" :scroll-left="item.scrollX" scroll-with-animation="true" scroll-x="true"
				:scroll-into-view="item.scroll" scroll-left="100%" v-for="(item, index) in messages" :key="index">
				<view id="block">

				</view>
				<view id="cell">
					<view id="cell-left">
						<view id="cell-icon">
							<u-icon name="bell-fill" size="36rpx" color="#3d5cff"></u-icon>
						</view>
					</view>
					<view id="cell-right">
						<text id="line1">{{item.title}}</text>
						<u-icon id="cell-icon" name="clock" size="22rpx"></u-icon>
						<text id="line2">{{calcTime(item.createTime)}}</text>
					</view>
				</view>
				<view id="cell-delete" @click="deleteMessage(index)">
					<view id="icon">
						<u-icon name="trash-fill" size="68"></u-icon>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var _this = null;
	const api = require('api.js');
	const message = require('message.js');
	const util = require('util.js');
	export default {
		data() {
			return {
				scrollTop: 0,
				lastClickNav: 0,
				back: false,
				iconStyles: {
					fontSize: '32rpx',
					color: 'white'
				},
				customStyles: {
					background: '#3d5cff'
				},
				messages: []
			}
		},
		onLoad() {
			_this = this;
			_this.back = getCurrentPages().length > 1;
			message.listenMessageLoaded((messages) => {
				_this.messages = messages;
				_this.$forceUpdate();
			});
			_this.messages = message.getMessageListCached();
			_this.updateRead();
		},
		onPullDownRefresh() {
			_this.messages = message.getMessageListCached();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll(e) {
			_this.scrollTop = e.scrollTop;
		},
		methods: {
			clickBack: function(e) {
				var pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack({
						url: pages[pages.length - 2].url
					})
				}
			},
			clickNav: function() {
				var now = new Date().getTime();
				var diff = now - _this.lastClickNav;
				_this.lastClickNav = now;
				if (diff < 300) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 100
					})
				}
			},
			calcTime: function(e) {
				return util.calcTimeAgo(e);
			},
			restoreScroll: function() {
				_this.messages.forEach(msg => {
					msg.scroll = 'block';
				})
				setTimeout(() => {
					_this.messages.forEach(msg => {
						msg.scroll = '';
					})
				}, 50);
			},
			updateRead: function() {
				if (_this.messages) {
					for (var i = 0; i < _this.messages.length; i++) {
						if (!_this.messages[i].isRead) {
							message.readMessage(i);
						}
					}
					_this.messages = message.getMessageListCached();
					_this.$forceUpdate();
				}
			},
			deleteMessage: function(e) {
				message.deleteMessage(e);
				_this.messages = message.getMessageListCached();
				_this.$forceUpdate();
				_this.restoreScroll();
				_this.$refs.uToast.show({
					type: 'success',
					message: '删除成功',
					duration: 500,
					icon: ''
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: calc(var(--status-bar-height) + 86rpx);
		position: relative;
		background: white;

		#back {
			position: absolute;
			padding-top: calc(var(--status-bar-height) + 18rpx);
			padding-left: 12rpx;
			z-index: 99999;
		}

		#nav-title {
			position: absolute;
			padding-top: calc(var(--status-bar-height) + 20rpx);
			padding-left: 305rpx;
			font-weight: bold;
			font-size: 36rpx;
			z-index: 99;
		}

		#line {
			position: absolute;
			top: calc(var(--status-bar-height) + 85rpx);
		}
	}

	#title {
		padding-left: 48rpx;
		padding-top: calc(var(--status-bar-height) + 120rpx);
		color: #1f1f39;
		font-size: 64rpx;
		font-weight: 600;
		height: 140rpx;
	}

	.scroll-list {
		width: 100%;
		height: 180rpx;

		#scroll-view {
			white-space: nowrap;
			width: 710rpx;
			height: 180rpx;
			margin-right: 40rpx;

			#block {
				display: inline-block;
				height: 160rpx;
			}

			#cell {
				display: inline-block;
				position: relative;
				width: 660rpx;
				height: 160rpx;
				left: 40rpx;
				margin-bottom: 20rpx;
				border-radius: 25rpx;
				box-shadow: 0px 8px 12px rgba(184, 184, 210, 0.2);

				#cell-left {
					position: absolute;
					padding-top: 36rpx;
					padding-left: 40rpx;

					#cell-icon {
						width: 96rpx;
						height: 96rpx;
						background: rgba(234, 234, 255, 1);
						border-radius: 25rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-around;
					}
				}

				#cell-right {
					position: absolute;
					padding-top: 24rpx;
					padding-left: 170rpx;
					width: 100%;
					height: 96rpx;

					#cell-icon {
						position: absolute;
						padding-top: 72rpx;
					}

					#line1 {
						position: absolute;
						color: rgba(31, 31, 57, 1);
						font-size: 24rpx;
						font-weight: 800;
						padding-top: 20rpx;
					}

					#line2 {
						position: absolute;
						color: rgba(184, 184, 210, 1);
						font-size: 24rpx;
						padding-top: 66rpx;
						padding-left: 32rpx;
					}
				}
			}

			#cell-delete {
				display: inline-block;
				position: absolute;
				top: 36rpx;
				left: 740rpx;

				#icon {
					display: flex;
					flex-direction: row;
					justify-content: center;
					background: #f56c6c;
					width: 48px;
					height: 48px;
					border-radius: 50%;
				}

				#icon:active {
					background: #d95f5f;
				}
			}
		}
	}
</style>
